<template>
  <span>{{ formatNumber }}</span>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps<{
  value: any;
}>();
const formatNumber = computed(() => {
  if (props.value < 10000) return props.value.toFixed(0);
  if (props.value > 10000 && props.value < 100000000) {
    return `${(props.value / 10000).toFixed(0)}万`;
  }
  if (props.value > 100000000) {
    const big = Number((props.value / 100000000).toFixed(0));
    const small = ((props.value - big * 100000000) / 10000).toFixed(0);
    return `${big}亿${small}万`;
  }
  return undefined;
});
defineOptions({ name: "ReadableNumber" });
</script>

<style scoped></style>
